import React, { Component } from 'react'

export default class Mark extends Component {
    state = {
        flag: false,
        list: [
            {
                title: "篮球",
                flag: false
            },
            {
                title: "足球",
                flag: false
            },
            {
                title: "乒乓球",
                flag: false
            }
        ]
    }
    render() {
        const { list } = this.state
        const { acceptFlag } = this.props
        return (
            <div className='mark'>
                <div className='box'>
                    <ul>
                        {
                            list.map((item, index) => {
                                return <li key={index}>
                                    {item.title}
                                    <input 
                                        checked = { item.flag }
                                        onChange = {(ev) => {
                                            // 通过setState修改数组或者对象的时候
                                            // 首先先拷贝一份，修改拷贝的那份
                                            // 再通过setState赋值
                                            let list = [...this.state.list]
                                            list[index].flag = ev.target.checked
                                            this.setState({
                                                list
                                            })
                                        }}
                                        type="checkbox" />
                                </li>
                            })
                        }
                    </ul>
                    <button onClick={() => {
                        acceptFlag(false)
                    }}>取消</button>
                    --------
                    <button onClick={() => {
                        acceptFlag(false, list)
                    }}>确定</button>
                </div>
            </div>
        )
    }
}
